<template>
  <div>
    <div class="witten-record">
      <el-button
        size="small"
        icon="el-icon-printer"
        @click="$print($refs.print, null)"
      >
        打印
      </el-button>
      <el-button
        v-if="showLeaveStatics"
        :style="{ display: isAdmin ? 'block' : 'none' }"
        @click="dialogReportStaticsVisible = true"
        type="primary"
        size="small"
        round
      >
        请休假统计单
      </el-button>
    </div>
    <div class="witten" ref="print">
      <el-popover
        placement="bottom-end"
        width="400"
        trigger="hover"
        content="请休假类型：事假、病假和年休假。请休假期间常住地需明确到县（市）。5天以上的年休假建议分批分次完成，尽量避免与国家长假连休。办公室处级领导干部因事（病）请假须向主任报告。科长、副科长因事（病）请假2天以内，由办公室分管领导审批；3天及以上报办公室主任审批；其他干部请假4天内报办公室分管领导审批；5天以上报办公室主任审批。"
      >
        <div class="title" slot="reference">
          中共文山州委办公室带薪休假审批表
        </div>
      </el-popover>
      <table
        style="word-break: break-all"
        class="table-wrapper"
        border="1px"
        cellspacing="0"
        cellpadding="0"
      >
        <tr height="40">
          <td width="12%" align="center">姓名</td>
          <td colspan="4" class="input-content">
            {{ holidayOwner || $store.state.user.first_name }}
          </td>
          <td width="16%" align="center">请休假种类</td>
          <td colspan="4" class="input-content">
            <span v-if="hasData">{{ holidayType }}</span>
            <el-select v-else v-model="holidayType">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr height="40">
          <td width="12%" align="center">请休假时间</td>
          <td colspan="12" class="input-content date">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              :readonly="hasData"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <span class="total-day"> 共{{ totalDay }}天 </span>
          </td>
        </tr>
        <tr height="40">
          <td width="12%" align="center" style="line-height: 18px">请休假期间常住地</td>
          <td colspan="12" class="input-content" style="line-height: 18px">
            <el-input class="input-address" style="width:19%" v-model="address.province"  placeholder="请输入" />
            <span>省</span>
            <el-input class="input-address" style="width:28%"  v-model="address.city"  placeholder="请输入" />
            <span>州（市）</span>
            <el-input class="input-address" style="width:28%" v-model="address.county"  placeholder="请输入" />
            <span>县（区）</span>
      
          </td>
        </tr>
        <template v-if="processCode === 'TSPZZLSB'">
          <tr class="leader-wrapper">
            <td width="30" align="center">领导审批</td>
            <td colspan="6" class="content">
              <div class="inform" v-for="(p, i) in pointData['领导审批']" :key="i">
                <div>{{ p.message }}</div>
                <div class="info">
                  <div class="info-name">{{ p.userId }}</div>
                  <div>{{ parseTime(p.time) }}</div>
                </div>
              </div>
            </td>
          </tr>
        </template>
        <template v-else>
          <tr height="40">
            <td width="12%" align="center">人教科审核</td>
            <td colspan="12" class="input-content date">
              {{ getLeaderAdvice("人教科审核") }}
            </td>
          </tr>
          <tr height="40">
            <td width="12%" align="center" style="line-height: 20px">
              科室负责人<br />意见
            </td>
            <td colspan="4" width="40%" class="input-content">
              {{ getLeaderAdvice("科室负责人意见") }}
            </td>
            <td width="16%" align="center">分管领导审批</td>
            <td colspan="4" class="input-content">
              {{ getLeaderAdvice("分管领导审批") }}
            </td>
          </tr>
          <tr height="40">
            <td width="12%" align="center">主要领导审批</td>
            <td colspan="12" class="input-content">
              {{ getLeaderAdvice("主要领导审批") }}
            </td>
          </tr>
          
        </template>
        <tr v-if="showAdviceInput && !queryData.isHand" class="situation">
          <td width="30" align="center">审批意见</td>
          <td colspan="12" class="content">
            <el-input
              type="textarea"
              :rows="4"
              v-model="comment"
              placeholder="填写意见"
            ></el-input>
          </td>
        </tr>
      </table>
    </div>
    <!-- <div>
        <table class="table-wrapper" border="1px" cellspacing="0" cellpadding="0">
        <tr height="80">
          <td width="5%" align="center">序号</td>
          <td width="7%" align="center">姓名</td>
          <td width="7%" align="center">应休假天数</td>
          <td width="12%" align="center">已休假天数</td>
          <td width="7%" align="center">病假</td>
          <td width="7%" align="center">事假</td>
          <td width="7%" align="center">丧假</td>
          <td width="7%" align="center" style="line-height: 20px;">陪护假<br/>（产假）</td>
        </tr>
        <tr height="40">
          <td width="5%" align="center"></td>
          <td width="7%" align="center"></td>
          <td width="7%" align="center"></td>
          <td width="12%" align="center"></td>
          <td width="7%" align="center"></td>
          <td width="7%" align="center"></td>
          <td width="7%" align="center"></td>
          <td width="7%" align="center"></td>
        </tr>
      </table>
    </div> -->
    <history-record-modal
      :dialogVisible="dialogReportStaticsVisible"
      :onClose="
        () => {
          dialogReportStaticsVisible = false;
        }
      "
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moment from 'moment'
import { parseTime } from "@/utils/index";
export default {
  name: "Witten",
  props: {
    pager: {
      type: Object,
      default: () => {},
    },
    queryData: {
      type: Object,
      default: () => ({}),
    },
    pointData: {
      type: Object,
      default: () => ({}),
    },
    processCode: {
      type: String
    },
    showAdviceInput: {
      type: Boolean,
      default: false,
    },
    showLeaveStatics: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    HistoryRecordModal: () =>
      import(
        "@/views/markSys/reportMaterials/HistoryRecord/HistoryRecordModal.vue"
      ),
  },
  watch: {
    dateRange(value) {
      const day = moment(value[1]).diff(moment(value[0]), "days");
      this.totalDay = day + 1;
    },
    pager: {
      handler(data) {
        if (data) {
          const { owner, type, start_date, end_date ,leave_address} = data;
          const address = JSON.parse(leave_address)
          this.holidayOwner = owner;
          this.holidayType = type;
          this.dateRange = [start_date, end_date];
          this.hasData = true;
          this.address = {
            province:address[0],
            city:address[1],
            county:address[2]
          }
          
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      holidayOwner: null,
      dateRange: [],
      holidayType: "事假",
      totalDay: 0,
      hasData: false,
      options: [
        {
          value: "病假",
          label: "病假",
        },
        {
          value: "事假",
          label: "事假",
        },
        {
          value: "丧假",
          label: "丧假",
        },
        {
          value: "年假",
          label: "年假",
        },
        {
          value: "陪护假（产假）",
          label: "陪护假（产假）",
        },
      ],
      comment: "",
      dialogReportStaticsVisible: false,
      isAdmin: false,
      address:{
        province:"",
        city:"",
        county:""
      }

    };
  },
  computed: {
    ...mapGetters(["device", "roles"]),
  },
  mounted() {
    this.isAdmin = this.roles.some((role) => ~role.indexOf("管理员"));
  },
  methods: {
    parseTime,
    getLeaderAdvice(leader) {
      const point = this.pointData[leader] || [];
      let adviceStr = ''
      if (point.length) {
        point.forEach(item => {
          const { message, userId, time } = item;
          const first_name = userId && userId.split("(")[0];
          adviceStr += `${message}（${first_name} ${moment(time).format('YYYY-MM-DD HH:mm')}）\n`
        })
      }
      return adviceStr;
    },
  },
};
</script>
<style lang="scss">
.witten {
  .table-wrapper {
    .date {
      .el-input__inner {
        border: none !important;
      }
      .el-date-editor .el-range-input {
        color: #000;
      }
    }
    .el-range-editor {
      width: 90%;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
<style lang="scss" scope>
.witten-record {
  margin: 0 auto;
  padding-top: 8px;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  position: absolute;
  right: 0;
}
.witten {
  .title {
    text-align: center;
    font-size: 30px;
    width: 100%;
    padding-top: 40px;
    margin: 0px auto 52px;
    max-width: 800px;
    cursor: pointer;
  }
  .table-wrapper {
    width: 100%;
    margin: 20px auto;
    max-width: 800px;
    font-size: 14px;
    border-collapse: collapse;
    position: relative;
    .total-day {
      width: 8%;
      letter-spacing: 2px;
      box-sizing: border-box;
      display: inline-block;
    }
    .input-content {
      text-align: center;
    }
    .input-address{
      border: none;
      input{
        text-align: center;
        border: none !important;
      }
    }
    .leader-wrapper {
      .content {
        padding: 10px;

        .inform {
          height: 80px;
          padding: 10px 10px 20px 0;
          /* margin: 0 10px; */
          border-bottom: 1px solid #ccc;
          color: #000;
          font-weight: normal;

          &-comment {
            width: 60%;
          }

          .info {
            float: right;
            font-size: 12px;
            text-align: center;
            color: #797979;

            &-name {
              padding: 6px;
            }
          }

          &:last-child {
            border: none;
          }
        }
      }
    }
  }
}
</style>